<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function operate(){
            /**
             * 访问属性
             */ 
            // 获取属性
            // console.log($('#hello').attr('title'))
            
            // 修改属性
            // $('#hello').attr('title', '哈哈哈哈')

            // console.log($('#username').val())
            // $('#username').val('张三')

            // console.log($('#protocol').prop('checked'))
            // $('#protocol').prop('checked', true)

            /**
             * 访问内容
             */ 
            // console.log($('#hello').text())
            // $('#hello').text('欢迎来到南京')

            /**
             * 节点操作
             */
            // $('#content').append($('<li>').text('mike'))
            // $('#content').empty()
            $('#content').remove()
        }
    </script>
</head>
<body>
    <input type="button" value="按钮1" onclick="operate()">
    <hr>


    <div id="hello" title="嘿嘿">welcome to nanjing</div>
    用户名：<input type="text" id="username"> <br>
    注册协议：<input type="checkbox" id="protocol"> <br>

    <ul id="content">
        <li>tom</li>
        <li>jack</li>
        <li>alice</li>
    </ul>
</body>
</html>